<template>
	<div id="permissionman">
		<el-button
			type="success" style="margin-bottom: 10px"
			@click="showaddnew=true,parentid=0,parentDesc=''"
		>
			新增权限
		</el-button>
        <el-collapse accordion>
        	
            <el-collapse-item  v-for="(item,key,index) in allPermissions" 
            :key="key"
            :name="index"
            :title="item.permissionDesc"
            style="text-align:left;"
            >
            	<template slot="title">
                    <div class="permissionTitle">
                        {{item.permissionDesc}}
                        <el-button type="danger" size="mini" @click.stop="deletePermission(item._id)">删除</el-button>
                    </div>
                </template>
               <ul>
               		<li style="margin-left:10px;margin-bottom:10px">
               			<el-button
						type="primary" style="margin-bottom: 10px"
						size ="mini"
						@click="showaddnew=true,parentid=item._id,parentDesc=item.permissionDesc"
						>
							新增权限
						</el-button>
               		</li>
                    <li v-for="(permission,permissionKey) in item.children" 
                    :key="permissionKey"
                    style="padding-left:20px"
                    >
                       {{permission.permissionDesc}}
                       <el-button type="danger" size="mini" @click.stop="deletePermission(item._id)">删除</el-button>
                   </li>
               </ul>
            </el-collapse-item>
        </el-collapse>
        <addnewperssmin 
        :showaddnew="showaddnew"
        
        :parentid="parentid"
        :parentDesc="parentDesc"
        />
	</div>
</template>

<script>
	import addnewperssmin from "./addnewpermission"
	export default{
		components:{addnewperssmin},
		data(){
			return{
				activeName:"2",
				showaddnew:false,
				parentid:0,
				parentDesc:""
			}
		},
		methods:{
			deletePermission(id){
				var action = ()=>{
					this.$http.post(this.$apis.deletePermissionById,{_id:id})
					.then((resp)=>{
						this.$message({
							message:resp.data.message,
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							
							this.$store.dispatch("loadAllPermission")
						}
					})
				}
				this.operatorConfirm(action,"删除权限");
			}
			
		},
		computed:{
			allPermissions(){
				
				return this.$store.getters.allPermissions;
			}
		},
		mounted(){
			this.$store.dispatch("loadAllPermission")
		}
	}
</script>

<style lang="scss" scoped>
	#permissionman{
		width: 100%;
		height: 100%;
		text-align:left;
	}
	#permissionman /deep/.el-collapse-item__header{
		padding-left: 10px;
	}
	.permissionTitle{
        display: flex;
        justify-content: space-between;
    }
</style>